<template>
  <div class="user">
    <div class="header">
      <div>
        <i v-if="!users.avatar" class="iconfont" style="font-size:58px;">&#xe704;</i>
        <img v-else :src="users.avatar" alt="">
      </div>
      <div>
        <h6>{{users.gender==0?'Miss.':'Mr.'}}</h6>
        <p>{{users.name}}</p>
      </div>
    </div>
    <h5>科室：{{users.department_title}}</h5>
    <h5>职位：{{users.position_title}}</h5>
    <h5 >所在医院：{{users.hospital_title}}</h5>
    <h5 >语言：{{users.language}}</h5>
    <h5 >国家/地区：{{users.country}}</h5>
    <h5 >货币：{{users.currency}}</h5>
    <h5 >联系电话：{{users.phone}}</h5>
    <h5 >邮箱：{{users.email}}</h5>
    <h5 >备用电子邮箱地址：{{users.email2}}</h5>
  </div>
</template>

<script>
import store from '@/vuex/store.js'
export default {
  data () {
    return {

    }
  },
  mounted () {
    store.commit('changeactive', 1)
  },
  store,
  computed: {
    users(){
      //订单详情
      return this.$store.state.users
    }
  },
}
</script>

<style lang='scss' scoped>
@import '../../../assets/css/iconfonta.css';
  .user::-webkit-scrollbar {
    width: 10px;
    height: 1px;
  }
  .user::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(181,181,181,1);
  }
  .user::-webkit-scrollbar-track {
    border-radius: 10px;
    background: transparent;
  }
  .user{
    width: 100%;
    height: 100%;
    padding-left: 20px;
    padding-top: 5px;
    box-sizing: border-box;
    overflow: auto;
    .header{
      display: flex;
      align-items: flex-end;
      img{
        width: 58px;
        height: 58px;
        border-radius: 5px;
        box-shadow:0px 0px 9px 0px rgba(0, 0, 0, 0.13);
      }
      div{
        margin-left: 20px;
        color: #333;
        p{
          margin-top: 10px;
          font-size: 14px;
        }
        h6{
          font-size: 12px;
        }
      }
    }
    >h5{
      font-size: 14px;
      color: #515151;
      margin-top: 20px;
    }
  }
</style>